<template>
  <div
    id="echart_con"
    :class="'histogram histogram' + randomIndex"
    :style="
      'width:' +
      width +
      ';' +
      'height: ' +
      height +
      'px;' +
      (borderProps ? borderProps + ';' : 'border: 1px solid #333;') +
      (borderColor ? 'border-color:' + borderColor + ';' : '') +
      'margin: 0 auto;' + 
      (hiddenBorder ? 'border-width: 0;' : '')
    "
    :key="chart_key"
  ></div>
</template>

<script>
// 调用
// import histogram from "@/components/LcM/echarts/histogram";

// 'histogram': histogram

// <histogram
//     width="50%"
//     height="300"
//     borderColor="#f44"
// />

// <histogram
//     width="50%"
//     height="300"
//     borderColor="#f44"
//     dataOptionFull="curOption"
// />

export default {
  props: {
    width: {
      type: [String],
      default: "50%",
    },
    height: {
      type: [String],
      default: "300",
    },
    borderProps: {
      type: [String],
    },
    borderColor: {
      type: [String],
    },
    dataOptionFull: {
      type: [Object],
    },
    //标题属性
    yTitle: {
      type: [String],
    },
    //柱状图颜色
    itemColor: {
        type: [String],
        default: "#f44"
    },
    //边框隐藏
    hiddenBorder: {
      type: [String, Boolean],
    }
  },
  mounted() {
    //格式化图表属性
    this.formatEchart();
    //数据请求

    /* 渲染图表 */

    //随机类名，用来区分图表
    this.randomIndex = (Math.random() * 1000).toFixed(0);
    let echartClassName = "histogram" + this.randomIndex;
    //初始化
    let myChart = "";
    setTimeout(() => {
      myChart = this.$echarts.init(
        document.getElementsByClassName(echartClassName)[0]
      );
      myChart.setOption(this.option);
      //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    });
  },
  methods: {
    //格式化
    formatEchart() {
      const propsObj = this.$props;
      for (var itemKey in propsObj) {
        var itemVal = propsObj[itemKey];
        if (itemKey == "yTitle") {
          this.option.title.text = itemVal;
        } else if (itemKey == "itemColor") {
            this.option.color = [itemVal];
        }
      }
    },
  },
  data() {
    return {
      //用来区分多个图表
      randomIndex: "1",
      //key更新
      chart_key: 100,
      //柱状图配置
      option: {
        //配色
        title: {
          text: "标题",
          textStyle: {
            color: "#333",
            fontSize: 14,
            height: 20,
            lineHeight: 20,
          },
        },
        color: ["#f44"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "每月花费",
            type: "bar",
            barWidth: "40%",
            data: [995, 666, 444, 858, 654, 236, 645, 546, 846, 225, 547, 356],
          },
        ],
      },
    };
    //data end
  },
};
</script>

<style lang="scss" scoped>
.histogram {
  padding: 20px;
  padding-bottom: 0;
  border-radius: 4px;
}
</style>